<template>
  <div class="body">
    <div class="title">故障报修标题</div>
    <div class="inquire">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="楼栋ID">
          <CascaderSelect style="width: 100px" @changeBuildId="getBuildId" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="Inline.key"
            placeholder="保修地址"
            class="name"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="formInline.user"
            placeholder="居民电话"
            class="phone"
          ></el-input>
        </el-form-item>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
        <el-form-item label="房间号">
          <el-input
            v-model="formInline.user"
            placeholder="房间号"
            class="room"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input
            v-model="formInline.user"
            placeholder="房间号"
            class="room"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item label="住户类型">
            <el-select
              v-model="formInline.region"
              placeholder="请选择"
              class="type"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchlist">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="fun">
      <el-button type="danger" @click="deleteall">批量删除</el-button>
    </div>
    <Table
      :loading="loading"
      :tableData="tableData"
      :tableHead="tableHead"
      @updateNotice="addShow"
      @deleteNotice="deleteNotice"
      @multipleSelection="multipleSelection"
    />
    <div class="block">
      <page :total="counts" @changpage="searchlist" />
    </div>
    <DialogList  :titleFlag="titleFlag" :show="showDialog" :updateData="updateData" @close="addShow"/>
  </div>
</template>

<script>
import CascaderSelect from '../components/building/cascader.vue'
import page from "../components/common/page1.vue";
import Table from "../components/common/Table.vue";
import { repairsDeleteall, repairslist, repairsDelete } from "../api/user";
import { Message } from "element-ui";
import DialogList from "./../components/common/repairsDialog";

export default {
  components: {
    Table,
    page,
    DialogList,
    CascaderSelect
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      titleFlag: false,
      updateData: {},
      alldelete: "",
      Inline: {
        psize: 5,
        page: 1,
        key: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      counts: 0,
      tableHead: [
        {
          label: "ID",
          prop: "id",
        },
         {
          label: "故障类型",
          prop: "typename",
        },
        {
          label: "地址",
          prop: "address",
        },
        {
          label: "故障描述",
          prop: "content",
        },
        {
          label: "维修状态",
          prop: "statename",
        },
        {
          label: "手机号",
          prop: "tel",
        },
        {
          label: "业主名称",
          prop: "username",
        },

        {
          label: "时间",
          prop: "addtime",
        },

        {
          label: "操作",
          type: "button",
          button: {
            update: true,
            delete: true,
          },
        },
      ],
      tableData: [],
      multipleSelectionArr: [],
       pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
    };
  },
  mounted() {
    this.searchlist();
  },
  methods: {
     getBuildId(id) {
      console.log("buildingid", id);
      this.formline.buildingid = id;
    },
    async deleteall() {
      let self = this;
      if (this.multipleSelectionArr.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择删除人",
        });
      } else {
        let ids = [];
        self.multipleSelectionArr.forEach((item) => {
          ids.push(item.id);
        });
        let res = await repairsDeleteall({ ids: ids });
        if (res.errCode === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
        this.searchlist();
      }
    },
    async addShow(show,data,flag) {
      this.showDialog = show
      console.log(show);
      if(show){
        this.titleFlag=!!data
        if(this.titleFlag){
          const rel = this.tableData.find((item)=>item.id==data.id)
          this.updateData=rel
        }
        this.searchlist()
      }else{
        flag && this.searchlist()
        this.updateData={}
      }
    },
    async deleteNotice(id) {
      let ids = id.id;
      let res = await repairsDelete({ id: ids });
      this.$message({
        type: "success",
        message: "删除成功",
      });
      this.searchlist();
    },
    multipleSelection(data) {
      this.multipleSelectionArr = data;
    },
    async searchlist(params) {
      let res = await repairslist(Object.assign(this.Inline, params));
      this.tableData = res.data.list;
      this.counts = res.data.counts;
      this.$message({
        type:'success',
        message:'查询成功'
      })
    },

    handleSelectionChange(val) {
      this.alldelete = val;
    },
    handleSizeChange(val) {
      this.Inline.psize = val;
      this.searchlist();
    },
    handleCurrentChange(val) {
      this.Inline.page = val;
      this.searchlist();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: rgb(77, 119, 196);
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.demo-form-inline {
  padding-left: 20px;
}

.fun {
  padding-left: 20px;
  margin-bottom: 20px;
}
.el-table {
  margin-left: 20px;
  margin-right: 20px;
}
.block {
  text-align: center;
}
</style>